<template>
  <div class="register-info">
    <div class="drawer-wrap" :class="{ disabled: !editable }" v-loading="loading">
      <div class="drawer-content tag-scrollbar">
        <el-form :model="editForm" label-width="0" :rules="editFormRules" ref="editForm">
          <el-row :gutter="20">
            <el-col :span="12" :offset="6">
              <div class="tag-name">
                <div class="star"></div>
                <el-form-item prop="tagNm">
                  <el-input placeholder="请输入标签名称" v-model="editForm.tagNm" :disabled="!editable"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <div class="row1 clearfix">
                <div class="star"></div>
                <div class="row1-left linear-blue">
                  <icon-svg name="iconKind"></icon-svg>
                  标签类别
                </div>
                <div class="row1-content kind-content">
                  <el-form-item prop="tagKind">
                    <el-radio-group v-model="editForm.tagKind" :disabled="!editable" class="tag-scrollbar">
                      <el-radio v-for="item in $dictList('tag_kind')" :key="item.key" :label="item.key">
                        {{ item.value }}
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="row1 clearfix">
                <div class="star"></div>
                <div class="row1-left linear-blue">
                  <icon-svg name="iconHq"></icon-svg>
                  统计粒度
                </div>
                <div class="row1-content hq-content">
                  <el-form-item prop="hqTag">
                    <el-radio-group v-model="editForm.hqTag" :disabled="!editable" class="tag-scrollbar">
                      <el-radio v-for="item in $dictList('is_hq_tag')" :key="item.key" :label="item.key">
                        {{ item.value }}
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="row1 clearfix">
                <div class="star"></div>
                <div class="row1-left linear-purpose">
                  <icon-svg name="iconClient"></icon-svg>
                  客户统计范围
                </div>
                <div class="row1-content hq-content">
                  <el-form-item prop="clientStatRange">
                    <el-radio-group v-model="editForm.clientStatRange" :disabled="!editable" class="tag-scrollbar">
                      <el-radio v-for="item in $dictList('client_stat_range')" :key="item.key" :label="item.key">
                        {{ item.value }}
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="row1 clearfix">
                <div class="star"></div>
                <div class="row1-left linear-purpose">
                  <icon-svg name="iconRequirePlatform"></icon-svg>
                  标签上线平台
                </div>
                <div class="row1-content purpose">
                  <el-form-item prop="platformIds">
                    <el-select v-model="editForm.platformIds" multiple :disabled="!editable">
                      <el-option
                        v-for="item in platforms"
                        :key="item.appPlfmId"
                        :label="item.appPlfmNm"
                        :value="item.appPlfmId"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="row1 clearfix">
                <div class="row1-left linear-cyan">
                  <icon-svg name="iconMount"></icon-svg>
                  唯一标识
                </div>
                <div class="row1-content purpose">
                  <el-form-item prop="identifierFlag">
                    <el-switch
                      v-model="editForm.identifierFlag"
                      active-color="#13ce66"
                      :active-value="1"
                      :inactive-value="0"
                      active-text="是"
                      inactive-text="否"
                    ></el-switch>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="row1 clearfix">
                <div class="row1-left linear-cyan">
                  <icon-svg name="iconRequireDt"></icon-svg>
                  实际上线日期
                </div>
                <div class="row1-content purpose">
                  <el-form-item prop="actRolloutDt">
                    <el-date-picker
                      v-model="editForm.actRolloutDt"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                      :disabled="!editable"
                    ></el-date-picker>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="card row2">
                <div class="star"></div>
                <div class="title">
                  <icon-svg name="iconStory"></icon-svg><br />
                  标签故事
                </div>
                <div class="content purpose">
                  <el-form-item prop="tagStory">
                    <el-input
                      placeholder="请输入标签故事"
                      v-model="editForm.tagStory"
                      type="textarea"
                      :maxlength="1000"
                      :rows="5"
                      :show-word-limit="true"
                      :disabled="!editable"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="card row2">
                <div class="star"></div>
                <div class="title">
                  <icon-svg name="iconBizstmt"></icon-svg><br />
                  业务口径
                </div>
                <div class="content blue">
                  <el-form-item prop="bizStmt">
                    <el-input
                      placeholder="请输入业务口径"
                      v-model="editForm.bizStmt"
                      type="textarea"
                      :maxlength="1000"
                      :rows="5"
                      :show-word-limit="true"
                      :disabled="!editable"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="card row2">
                <div class="title">
                  <icon-svg name="iconItstmt"></icon-svg><br />
                  技术口径
                </div>
                <div class="content cyan">
                  <el-form-item prop="itStmt">
                    <el-input
                      placeholder="请输入技术口径"
                      v-model="editForm.itStmt"
                      type="textarea"
                      :maxlength="3000"
                      :rows="5"
                      :show-word-limit="true"
                      :disabled="!editable"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
            </el-col>
          </el-row>
          <template v-if="astTagRequireStatusList.length">
            <div class="content-divider second">
              <div class="clearfix">
                <div class="number">01</div>
                <div class="divider-title">注册状态<br />Register status</div>
                <div class="bg"></div>
              </div>
            </div>
            <ul class="tag-status-list">
              <li v-for="(item, index) in astTagRequireStatusList" :key="index">
                <el-row :gutter="20">
                  <el-col :span="5">{{ $name(item, 'handlerNnm', 'handlerNm') }}</el-col>
                  <el-col :span="5">{{ item.nodeNm }}</el-col>
                  <el-col :span="7">{{ item.procTm }}</el-col>
                  <el-col :span="7">{{ item.handlerCmnt }}</el-col>
                </el-row>
              </li>
            </ul>
          </template>
        </el-form>
      </div>
    </div>
    <div class="drawer-btns" v-if="editable">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="warning" size="medium" v-if="tagId" @click="giveup">撤销</el-button>
      <el-button type="primary" size="medium" @click="handleSave(false)">保存为草稿</el-button>
      <el-button type="primary" size="medium" @click="handleSubmit">下一步</el-button>
    </div>
    <similar-dialog ref="similarDialog" @callback="callbackSimilar"></similar-dialog>
  </div>
</template>

<script>
import similarDialog from '@/components/tag-similar-dialog'
export default {
  props: {
    tagId: {
      type: String,
      required: true,
      default: ''
    }
  },
  components: {
    similarDialog
  },
  data() {
    return {
      editable: false,
      loading: false,
      platforms: [],
      editForm: {
        tagNm: '',
        platformIds: [],
        tagKind: '',
        hqTag: '',
        clientStatRange: '',
        tagStory: '',
        bizStmt: '',
        itStmt: '',
        actRolloutDt: '',
        identifierFlag: 1
      },
      astTagRequireStatusList: [],
      editFormRules: {
        tagNm: [
          { required: true, message: '标签名称不能为空', trigger: 'blur' },
          { max: 100, message: '标签名称不能超过100个字符', trigger: 'blur' }
        ],
        platformIds: [{ required: true, message: '至少选择一项', trigger: 'change' }],
        tagKind: [{ required: true, message: '标签类别必须选择', trigger: 'change' }],
        hqTag: [{ validator: this.$checkBoolNum('统计粒度必须选择'), trigger: 'change' }],
        clientStatRange: [{ validator: this.$checkBoolNum('客户统计范围必须选择'), trigger: 'change' }],
        tagStory: [
          { required: true, message: '标签故事不能为空', trigger: 'blur' },
          { max: 1000, message: '标签故事不能超过1000个字符', trigger: 'blur' }
        ],
        bizStmt: [
          { required: true, message: '业务口径不能为空', trigger: 'blur' },
          { max: 1000, message: '业务口径不能超过1000个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    getSelections() {
      this.editable = true
      this.getPlatforms()
    },
    getDetail() {
      this.$ajax({
        url: this.$ajax.setUrl('ast/astTagRegister/readNode'),
        method: 'get',
        params: this.$ajax.setParams({
          tagIds: this.tagId
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.editable = data.data.editable
          this.editForm.tagNm = data.data.astRegisterFirstReadDTO.astTagDTO.tagNm
          this.editForm.platformIds = []
          this.editForm.tagKind = data.data.astRegisterFirstReadDTO.astTagDTO.tagKind
          this.editForm.hqTag = data.data.astRegisterFirstReadDTO.astTagDTO.hqTag
          this.editForm.clientStatRange = data.data.astRegisterFirstReadDTO.astTagDTO.clientStatRange
          this.editForm.tagStory = data.data.astRegisterFirstReadDTO.astTagDTO.tagStory
          this.editForm.bizStmt = data.data.astRegisterFirstReadDTO.astTagDTO.bizStmt
          this.editForm.itStmt = data.data.astRegisterFirstReadDTO.astTagDTO.itStmt
          this.editForm.actRolloutDt = data.data.astRegisterFirstReadDTO.actRolloutDt
          this.editForm.identifierFlag = data.data.astRegisterFirstReadDTO.identifierFlag
          this.astTagRequireStatusList = data.data.astTagRequireStatusList
          data.data.astRegisterFirstReadDTO.astPlatform.forEach(v => this.editForm.platformIds.push(v.key))
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getPlatforms() {
      this.$ajax({
        url: this.$ajax.setUrl('ast/astAppPlatform/getAll'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.platforms = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    handleCancel() {
      this.clearForm()
      this.$emit('close')
    },
    clearForm() {
      this.editable = false
      this.loading = false
      this.platforms = []
      this.scenes = []
      this.editForm = {
        tagNm: '',
        platformIds: [],
        tagKind: '',
        hqTag: '',
        clientStatRange: '',
        tagStory: '',
        bizStmt: '',
        itStmt: '',
        identifierFlag: 1
      }
      this.astTagRequireStatusList = []
      this.$nextTick(() => this.$refs.editForm.clearValidate())
    },
    handleSave(isSubmit = false) {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          this.loading = true
          let url = isSubmit ? 'ast/astTagRegister/firstSubmit' : 'ast/astTagRegister/firstSave'
          let itStmt = new Buffer(this.editForm.itStmt).toString('base64')
          this.$ajax({
            url: this.$ajax.setUrl(url),
            method: 'post',
            data: this.$ajax.setData({
              bizStmt: this.editForm.bizStmt,
              actRolloutDt: this.editForm.actRolloutDt,
              hqTag: this.editForm.hqTag,
              clientStatRange: this.editForm.clientStatRange,
              itStmt: itStmt,
              platformIds: this.editForm.platformIds,
              tagId: this.tagId,
              tagKind: this.editForm.tagKind,
              tagNm: this.editForm.tagNm,
              tagStory: this.editForm.tagStory,
              identifierFlag: this.editForm.identifierFlag
            })
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.$message.success(data.msg)
              if (data.data) this.$emit('updateTagId', data.data)
              if (isSubmit) {
                this.$emit('callback')
              }
            } else {
              this.$message.error(data.data || data.msg)
            }
            this.loading = false
          })
        }
      })
    },
    handleSubmit() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          this.loading = true
          let params = {
            tagName: this.editForm.tagNm,
            tagBizStmt: this.editForm.bizStmt
          }
          if (this.tagId) params.tagId = this.tagId
          this.$ajax({
            url: this.$ajax.setUrl('ast/astTagRequireManager/haveSimRequire'),
            method: 'post',
            data: this.$ajax.setData(params)
          }).then(({ data }) => {
            if (data && data.code === '0') {
              if (data.data && data.data.length) this.$refs.similarDialog.showDialog(data.data)
              else this.handleSave(true)
            } else {
              this.$message.error(data.data || data.msg)
              this.loading = false
            }
          })
        }
      })
    },
    giveup() {
      this.$confirm(`确定撤销注册标签【${this.editForm.tagNm}】？`).then(() => {
        let messageBox = document.getElementsByClassName('el-message-box__wrapper')
        messageBox[0].focus() // 防止按空格键重复确定
        this.$ajax({
          url: this.$ajax.setUrl(`ast/astTagRequireManager/giveupRequire/${this.tagId}/2`),
          method: 'post',
          data: this.$ajax.setData()
        }).then(({ data }) => {
          if (data && data.code === '0') {
            this.$message.success(data.msg)
            this.clearForm()
            this.$emit('callback', { type: 'close' })
          } else {
            this.$message.error(data.data || data.msg)
          }
        })
      })
    },
    callbackSimilar(way) {
      if (!way) this.loading = false
      else this.handleSave(way === 'submit')
    }
  }
}
</script>

<style lang="scss">
.register-info {
  .tag-name {
    position: relative;
    .el-input__inner {
      background-color: #fbf5e5;
      border: 1px dashed #faeace;
    }
  }
  .row1 {
    height: 90px;
    padding: 0 0 10px 200px;
    color: #fff;
    border-radius: 10px;
    border-top-right-radius: 0;
    margin-bottom: 20px;
    line-height: normal;
    box-shadow: #eee 0 0 10px;
    overflow: hidden;
    position: relative;
    .row1-left {
      width: 200px;
      height: 100%;
      line-height: 90px;
      padding: 0 0 10px 20px;
      position: absolute;
      left: 0;
      font-size: 20px;
      svg {
        width: 40px;
        height: 40px;
        vertical-align: middle;
        margin: -10px 5px 0 0;
      }
    }
    .row1-content {
      height: 100%;
      text-align: left;
      padding: 10px;
      padding-left: 20px;
      .el-form-item,
      .el-form-item__content {
        height: 100%;
        line-height: 25px;
      }
      .el-radio-group {
        height: 100%;
        overflow-y: auto;
      }
      .el-radio {
        margin-top: 10px;
      }
      &.hq-content .el-radio {
        margin-top: 25px;
      }
      .el-select {
        margin-top: 15px;
        .el-input {
          margin-top: 0;
        }
      }
      .el-input {
        margin-top: 15px;
      }
      .el-switch {
        margin-top: 25px;
      }
    }
    .content {
      font-size: 20px;
      margin-bottom: 10px;
    }
  }
  .row2 {
    margin-bottom: 20px;
    padding: 0 0 0 200px;
    border-bottom: 0;
    position: relative;
    &:before {
      width: 3px;
      height: 50px;
    }
    &:after {
      width: 3px;
      height: 30px;
    }
    .title {
      width: 200px;
      color: $theme-color;
      margin: 2px 0 18px 0;
      text-align: center;
      position: absolute;
      left: 0;
      svg {
        width: 50px;
        height: 50px;
        margin: 20px 0 10px 0;
      }
    }
    .content {
      height: auto;
      min-height: 150px;
      padding: 15px 15px 0 15px;
      text-align: left;
      border-left: 3px solid $border-color;
      position: relative;
      .el-form-item,
      .el-form-item__content {
        height: 100%;
        line-height: 25px;
      }
      .el-checkbox-group {
        height: 100%;
        overflow-y: auto;
      }
      .el-form-item {
        padding-bottom: 10px;
      }
      .el-form-item__error {
        top: calc(100% - 12px);
      }
      &:after {
        width: 3px;
        content: '';
        position: absolute;
        top: 10px;
        left: -3px;
        bottom: 10px;
      }
      &.purpose:after {
        background-color: #a18cf1;
      }
      &.blue:after {
        background-color: #23ace3;
      }
    }
  }
}
</style>
